<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>fetch</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="../lib/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="box">
    	<button @click="handleClick()">正在热映</button>

        <ul>
            <li v-for="data in datalist">
                <h3>{{data.name}}</h3>
                <img :src="data.poster"/>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
    	
      new Vue({
          el:"#box",
          data:{
              datalist:[]
          },
          methods:{
            handleClick(){
                axios.get("test.json").then(res=>{
                    console.log(res.data.data.films) // axios 自动包装data属性 res.data
                    this.datalist = res.data.data.films
                }).catch(err=>{
                    console.log(err);
                })
            }
          }
      })
    </script>
</body>
</html>